<template>
    <article class="main">
      <section class="order-main">
        <div class="head">
          <div class="avatar">
            <img :src="userAvatar" alt="" class="img">
          </div>
          <span class="nick">{{userNick}}</span>
        </div>
        <div class="income">
          <span>+</span><span v-big-number="sale"></span>
        </div>
        <div class="sale">
          <span>交易成功  </span> <span v-big-number="income"></span>
        </div>
        <div class="list-item">
          <span class="label">付款方式</span>
          <span class="text">{{payMethod}}</span>
        </div>
        <div class="list-item">
          <span class="label">商品说明</span>
          <span class="text">{{content}}</span>
        </div>
        <div class="list-item">
          <span class="label">物流信息</span>
          <span class="text">{{transport}}</span>
        </div>
        <div class="list-item">
          <span class="label">账单分类</span>
          <span class="text">{{assort}}</span>
        </div>
        <div class="line"></div>
        <div class="list-item">
          <span class="label">创建时间</span>
          <span class="text">{{date}}</span>
        </div>
        <div class="list-item">
          <span class="label">订单号</span>
          <span class="text">{{id}}</span>
        </div>
      </section>
      <router-link :to="{name: 'record', query:{userId}}" class="list-link">
        <span class="list-link-text">查看往来记录</span>
        <span class="arrow-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024">
            <path fill="#a7a3a2" d="M342.3 101.9L752.4 512 342.3 922.1l-70.7-70.7L611 512 271.6 172.6l70.7-70.7z"/>
          </svg>
        </span>
      </router-link>
    </article>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'OrderDetail',
  metaInfo: {
    title: '交易详情'
  },
  computed: {
    ...mapState({
      loading: state => state.order.loading, // 加载中
      payMethod: state => state.order.payMethod, // 支付方式
      content: state => state.order.content, // 交易内容简介
      assort: state => state.order.assort, // 交易分类
      transport: state => state.order.transport, // 物流状态
      date: state => state.order.date, // 创建时间
      id: state => state.order.id, // 订单号
      userId: state => state.order.userId, // 用户ID
      userNick: state => state.order.userNick, // 用户昵称
      userAvatar: state => state.order.userAvatar, // 用户头像
      sale: state => state.order.sale, // 销售额
      income: state => state.order.income // 收益
    })
  },
  methods: {
    ...mapActions({
      queryOrderDetail: 'order/QueryOrderDetail',
      resetOrderDetail: 'order/ResetOrderDetail'
    })
  },
  created () {
    this.queryOrderDetail(this.$route.query.id)
  },
  beforeDestroy () {
    this.resetOrderDetail()
  }
}
</script>

<style scoped lang="stylus">
  .main
    min-height 100vh
    background #efeef4
    &:before
      height 8px
      content ' '
      background #efeef4
      display block
      box-shadow inset 0 1px 0.99px 0.01px rgba(221, 221, 221, 0.004)
  // 主要部分
  .order-main
    background white
    border-bottom 1px solid #e4e2ec
  .head
    display flex
    justify-content center
    align-items center
    padding-top 24px
    padding-bottom 24px
    .avatar
      width 48px
      height 48px
      border-radius 50%
      background #efeef4
      margin-right 20px
      img
        max-width 100%
        border-radius 50%
    .nick
      font-size 28px
      color #333333
  .income
    display flex
    justify-content center
    align-items center
    color #e79040
    font-size 48px
  .sale
    display flex
    justify-content center
    align-items center
    color #a2a2a2
    font-size 24px
    margin-bottom 30px
  // 列表
  .list-item
    display flex
    padding-left 30px
    padding-right 30px
    margin-top 16px
    margin-bottom 16px
    .label
      color #888888
      font-size 24px
    .text
      flex 1
      color #2a2a2a
      font-size 24px
      padding-left 20px
      text-align right
  // 分割线
  .line
    height 1px
    background #e4e2ec
    margin-left 30px
  // 往来记录链接
  .list-link
    display flex
    text-decoration none
    background white
    margin-top 20px
    padding 30px
    border-top 1px solid #e4e2ec
    border-bottom 1px solid #e4e2ec
  .list-link-text
    font-size 22px
    flex 1
    color #111
  .arrow-icon
    width 24px
    height 24px
    align-self center
    svg
      max-width 100%
      height auto
      float left
</style>
